<template>
    <!--热门车型报价-->
    <div  class="panle carlist" :class="($store.state.appCarlist.actBrand || $store.state.appCarlist.actPrice || $store.state.appCarlist.actCarType || $store.state.appCarlist.actCountry) ?'' : 'carlist-top'">
        <div class="c">
            <ul>
                <li v-for="(v,i) in pagingMsg.carInfo" >
                  <div   v-if="v.pic" class="lst"  :style="{ 'border-top': !i? 'none' : '1px solid #f0f0f0'}" @tap="goCarDetail(v.id)">
                      <div class="lstImg">
                          <img  v-lazy="$store.state.appData.imgUrl+v.pic">
                      </div>
                      <div class="lstMsg">
                          <p style="font-size:0.7rem;color:#333;line-height:15px;">{{v.name}}</p>
                          <p style="font-size:0.75rem;color:#ff6a27;line-height:15px;">{{minGuidePrice(v)}}万起</p>
                          <p style="font-size:0.55rem;line-height:15px;color:#999999"><span style="color:#ff6a27;">{{v.carNum}}</span>种车型<span style="color:#ff6a27;margin-left:10px">{{v.shareNum}}</span>人在拼单</p>
                          <!-- <p style="font-size:0.6rem;color:#ff6a27;line-height:15px;">{{(v.minAllPrice/10000).toFixed(2)===(v.maxAllPrice/10000).toFixed(2)?(v.maxAllPrice/10000).toFixed(2):(v.minAllPrice/10000).toFixed(2)+'~'+ (v.maxAllPrice/10000).toFixed(2)}}万</p> -->
                      </div>
                  </div>
                  <div   v-else class="lst"  :style="{ 'border-top': !i? 'none' : '1px solid #f0f0f0'}" @tap="goCarDetail(v.id)">
                      <div class="lstImg">
                          <img  v-lazy="noCarPic">
                      </div>
                      <div class="lstMsg">
                          <p style="font-size:0.6rem;color:#333;line-height:15px;height:28px;">{{v.name+"(暂无车型图片)"}}</p>
                          <p style="font-size:0.6rem;color:#ff6a27;line-height:15px;">{{minGuidePrice(v)}}万起</p>
                          <p style="font-size:0.6rem;line-height:15px;"><span style="color:#ff6a27;">{{v.carNum}}</span>种车型<span style="color:#ff6a27;margin-left:10px">{{v.shareNum}}</span>人在拼单</p>
                          <!-- <p style="font-size:0.6rem;color:#ff6a27;line-height:15px;">{{(v.minAllPrice/10000).toFixed(2)===(v.maxAllPrice/10000).toFixed(2)?(v.maxAllPrice/10000).toFixed(2):(v.minAllPrice/10000).toFixed(2)+'~'+ (v.maxAllPrice/10000).toFixed(2)}}万</p> -->
                      </div>
                  </div>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
  import { getcarModelDetail } from '@/api/carDetail'
  export default {
    data() {
      return {
          noCarPic:'static/img/noCarPic.png',
          obj:{
              carSeriesId:"",
              customerId:this.$store.getters.user.id
          }
      }
    },
    props: {//也可以是对象，允许配置高级设置，如类型判断、数据校验、设置默认值
        pagingMsg: {
            type: Object
        }
    },
    watch: {},
    methods: {
        goCarDetail(carSeriesId){
          this.obj.carSeriesId=carSeriesId 
          getcarModelDetail(this.obj).then(resp => {
            this.$store.commit("GetCarDetails", resp.data) 
            this.$router.push({
                path: "/modelsOffer",
            })
          })
        },
        minGuidePrice(v) {
            // //console.log(v)
            let minGuidePrice = parseFloat(v.minGuidePrice)
            let maxGuidePrice = parseFloat(v.maxGuidePrice)
            if(minGuidePrice < maxGuidePrice){
                return minGuidePrice
            }
            else{
                return maxGuidePrice
            }
        }    
    },
    mounted () {
        
    },
    filters: {},
    computed: {

    },
    created() {
    }
  };
</script>

<style lang="scss" scoped>
    /*车型选择*/
    .carlist {
        background-color:#f5f5f5;
        width: 100%;
        position: relative;
        .lst {
            border-top:1px solid #e9e9e9;
            width: 100%;
            height:6rem;
            background:#fff;
            overflow: hidden;
            padding:10px;
            .lstImg {
                width: 45%;
                float: left;
                height: 100%;
                text-align:center;
                img{
                height:100%;
                vertical-align:middle;
                }
            }
            .lstMsg {
                width: 55%;
                float: left;
                height: 100%;
                padding:10px 0px 0px 15px;
                p {
                    text-overflow:ellipsis;
                    overflow: hidden;
                    word-wrap: break-word; 
                    word-break: normal; 
                    margin-bottom:15px;
                }
            }
        }
    }
    .carlist-top {
        margin-top:86px;
        min-height:0px;
    }
</style>